<template>
  <tabbar>
    <template #default>
      <tabItem path="/home">
        <template #item-icon>
          <div><img src="@/assets/img/tabbar/home.svg" alt="" /></div>
        </template>
        <template #item-icon-active>
          <div>
            <img src="@/assets/img/tabbar/home_active.svg" alt="" />
          </div>
        </template>
        <template #item-text>
          <div>首页</div>
        </template>
      </tabItem>

      <tabItem path="/category">
        <template #item-icon>
          <div><img src="@/assets/img/tabbar/category.svg" alt="" /></div>
        </template>
        <template #item-icon-active>
          <div>
            <img src="@/assets/img/tabbar/category_active.svg" alt="" />
          </div>
        </template>
        <template #item-text>
          <div>分类</div>
        </template>
      </tabItem>

      <tabItem path="/shopcart">
        <template #item-icon>
          <div><img src="@/assets/img/tabbar/shopcart.svg" alt="" /></div>
        </template>
        <template #item-icon-active>
          <div>
            <img src="@/assets/img/tabbar/shopcart_active.svg" alt="" />
          </div>
        </template>
        <template #item-text>
          <div>购物车</div>
        </template>
      </tabItem>

      <tabItem path="/profile">
        <template #item-icon>
          <div><img src="@/assets/img/tabbar/profile.svg" alt="" /></div>
        </template>
        <template #item-icon-active>
          <div>
            <img src="@/assets/img/tabbar/profile_active.svg" alt="" />
          </div>
        </template>
        <template #item-text>
          <div>我的</div>
        </template>
      </tabItem>
    </template>
  </tabbar>
</template>

<script>
import tabbar from "../common/tabbar/tabbar.vue";
import tabItem from "../common/tabbar/tabbarItem.vue";
export default {
  name: "Maintabbar",
  components: {
    tabbar,
    tabItem,
  },
};
</script>

<style>
</style>